<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-12-18 19:44:54
 * 天凉好个秋
-->
<template>
    <div class="skinPopover">
        <div class="title">{{ t('navbar.skin.displayMode') }}</div>
        <div class="flex-c displayModeBox trans">
            {{ displayModeNmae }}
            <div
                class="switch flex-b-c"
                :class="{ 'border': getDisplayMode() === DisplayModeEnmu.DARK }"
                @click="setDisPlayMode(undefined)"
            >
                <div class="indicator" :style="indicatorStyle"></div>
                <SvgIcon name="sun" size="16"></SvgIcon>
                <SvgIcon name="moon" size="16"></SvgIcon>
            </div>
        </div>
        <div class="title">{{ t('navbar.skin.themeColor') }}</div>
        <div class="colors">
            <div class="color-item" @click="setThemeColor(item)" v-for="(item, index) in colors" :key="index" :style="{ backgroundColor: item }">
                <div class="checked flex-c-c" v-if="getThemeColor() === item">
                    <SvgIcon name="check" size="16" fill="#fff"></SvgIcon>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import SvgIcon from '../svgIcon/svgIcon.vue'
import { DisplayModeEnmu } from '@/types/store/settingStoreType'
import { useI18n } from '@/hooks/locales/useI18N'
import { useDisplayModeSetting } from '@/hooks/setting/useDisplayModeSetting'
import { useThemeSetting } from '@/hooks/setting/useThemeSetting'
import { computed, reactive } from 'vue'

const { t } = useI18n()
const { getDisplayMode, setDisPlayMode } = useDisplayModeSetting()
const { getThemeColor, setThemeColor } = useThemeSetting()

// 显示模式名称
const displayModeNmae = computed(() => {
    if (getDisplayMode() === DisplayModeEnmu.DARK) return t('navbar.skin.dark')
    return t('navbar.skin.light')
})

// 模式指示器样式(位置)
const indicatorStyle = computed(() => {
    if (getDisplayMode() === DisplayModeEnmu.DARK) return 'transform: translateX(26px);'
    return 'transform: translateX(-2px);'
})

// 主题颜色列表
const colors = reactive([
    '#ff5c8a', '#ff7a9e', '#717ff9', '#4791eb', '#39afea', '#2bb669',
    '#6acc19', '#e2ab12', '#ff8f57', '#fd726d', '#fd544e', '#718093'
])

</script>

<style scoped lang='scss'>
.skinPopover {
    width: 284px;
    height: 224px;
    padding: 12px 16px;

    .title {
        @apply font-bold;
        color: $main-text-color;
    }
    .displayModeBox {
        height: 50px;
        color: $common-text-color;
    }
    .switch {
        position: relative;
        width: 60px;
        height: 30px;
        padding: 0 5px;
        margin-left: 10px;
        border-radius: 999px;
        border: 1px solid transparent;
        background-color: #273352;
        .indicator {
            position: absolute;
            width: 23px;
            height: 23px;
            border-radius: 50%;
            background-color: #fff;
            transition: all .3s linear;
        }
    }
    .border {
        border: 1px solid rgba($color: #fff, $alpha: 0.8);
    }

    .colors {
        display: flex;
        flex-wrap: wrap;
        .color-item {
            position: relative;
            width: 35px;
            height: 35px;
            border-radius: 6px;
            margin-right: 7px;
            margin-top: 10px;
        }

        .checked {
            position: absolute;
            bottom: -7px;
            right: -7px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 2px solid #fff;
            background-color: #ec4141;
        }
    }
}
</style>